<template>
  <div class="receive-content">

    <!-- 公共头 -->
    <header class="header-fiexed">
      <van-nav-bar :title="$route.meta.head.title"
                   left-arrow
                   @click-left="back">
        <!-- <img class="share-icon"
             src="@/assets/image/share-icon.png"
             slot="right"
             @click="showSharePanel = true" /> -->
      </van-nav-bar>
    </header>
    <template v-if="pageInfo">
      <div class="share-info">
        <!-- 分享人 -->
        <div class="share-person flex align-center">
          <img :src="pageInfo.share_head"
               class="user-avatar">
          <div class="share-title flex flex-warp">
            <div>{{pageInfo.share_name}}</div>
            <div>给你分享了一个礼品</div>
          </div>
        </div>
        <!-- 倒计时 -->
        <div class="countdown-content flex align-center justify-center">
          <span>请在</span>
          <span class="time">{{countdownTime.hours}}</span>
          <span>:</span>
          <span class="time">{{countdownTime.minutes}}</span>
          <span>:</span>
          <span class="time">{{countdownTime.seconds}}</span>
          <span>之内领取</span>
        </div>
      </div>

      <!-- 分享悬浮窗 -->
      <!-- <div class="float-share"
         @click="showSharePanel = true">
      分享
    </div> -->

      <!-- 商品区 -->

      <van-list @load="getGiftGoodsList"
                :loading="loading"
                :finished="!more"
                class="goods-content">
        <goods-module module-name="goods2n"
                      goodsImg="goods_img"
                      goodsName="goods_name"
                      goodsPrice="goods_price"
                      goodsId="goods_id"
                      btnText="领取"
                      :list="goodsList"
                      @clickGoods="clickGoods">
        </goods-module>
      </van-list>

      <!-- 登陆面板 -->
      <login-popup v-model="showLoginPanel"
                   @loginSuccess="showLoginPanel = false"></login-popup>

    </template>
  </div>
</template>

<script>
import GoodsModule from '@/components/GoodsModule'
import { giftLists, giftGoodsList } from '@/api/fcMemberSendGift'
import LoginPopup from './LoginPopup'
import { mapState } from 'vuex'
import { digit } from '@/utils/utils'
var lastForm = null
export default {
  name: 'Receive',
  data() {
    return {
      pageInfo: null, // 页面的信息
      expirationDate: 10000, // 有效期
      showLoginPanel: false, // 显示登陆弹窗
      page: 1,
      shareCode: this.$route.query.code || '', // 分享人code
      shareId: this.$route.query.inviter_id || '', // 分享人ID
      loading: false,
      more: true,
      // 页面倒计时
      countdownTime: {
        hours: '00',
        minutes: '00',
        seconds: '00'
      },
      goodsList: [] // 小礼品列表
    }
  },
  components: {
    GoodsModule,
    LoginPopup
    // SharePopup
  },
  computed: {
    ...mapState({
      user: state => state.user.info,
      token: state => state.user.token // 用户登陆信息
    })
  },
  created() {
    this.getGiftInfo()
  },
  /**
   * 路由守卫
   */
  beforeRouteEnter(to, from, next) {
    lastForm = from.name
    !from.name && (window.PageFrom = 'share') // 如果没记录过从哪里过来的，就记录
    next()
  },
  methods: {
    /**
     * 页面倒计时
     */
    startCountdown() {
      // let endTime = this.pageInfo.time - new Date().getTime() / 1000
      if (this.pageInfo.time <= 0) {
        return false
      } else {
        let countdown = setInterval(() => {
          if (this.pageInfo.time === 0) clearInterval(countdown)
          this.countdownTime = {
            hours: digit(parseInt(this.pageInfo.time / 60 / 60, 10)), // 计算剩余的小时
            minutes: digit(parseInt((this.pageInfo.time / 60) % 60, 10)), // 计算剩余的分钟
            seconds: digit(parseInt(this.pageInfo.time % 60, 10)) // 计算剩余的秒数
          }
          this.pageInfo.time -= 1
        }, 1000)
      }
    },
    /**
     * 详情返回的方法
     */
    back() {
      // 正常页面进入
      if (lastForm || window.history.length > 2) {
        this.$router.go(-1)
      } else {
        // 拓客二维码/直接链接进入
        this.$router.replace({
          name: 'HomeIndex'
        })
      }
    },

    /**
     * 选择商品
     */
    clickGoods(info) {
      if (this.user && this.token) {
        if (this.pageInfo.status !== 0) {
          this.$toast({
            type: 'fail',
            message: '您已经领取过小礼品，请勿重复领取'
          })
          return false
        }
        let param = { goods_id: info.goods_id }
        this.shareCode && (param.shareCode = this.shareCode)
        this.$router.push({ name: 'GoodsDetail', query: param })
      } else {
        this.showLoginPanel = true
      }
    },

    /**
     * 获取页面信息
     */
    getGiftInfo() {
      giftLists(this.shareId, this.shareCode, this.page)
        .then(res => {
          this.pageInfo = res.result
          this.startCountdown()
        })
        .catch(res => {
          this.$toast({
            type: 'loading',
            message: res.message,
            duration: 3000
          })
        })
    },

    /**
     * 获取小礼物列表
     */
    getGiftGoodsList() {
      giftGoodsList()
        .then(res => {
          this.goodsList = [...this.goodsList, ...res.result.data]
          this.more = !(this.page === res.result.last_page)
          this.page += 1
          this.loading = false
        })
        .catch(res => {
          this.$toast({
            type: 'fail',
            message: res.message
          })
        })
    }
  }
}
</script>

<style lang="scss">
.receive-content {
  background: linear-gradient(
    135deg,
    rgba(255, 123, 93, 1) 0%,
    rgba(255, 90, 129, 1) 100%
  );
  min-height: 100vh;

  .share-icon {
    width: 16px;
    height: 16px;
    margin: 15px;
  }

  .share-info {
    background-image: url('../../../assets/image/receive-bg.png');
    background-size: 100% 100%;
    height: 418px;
    position: relative;
    padding: 0 37.5px;

    // 分享人信息
    .share-person {
      padding: 20px 0;
      .user-avatar {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        margin-right: 15px;
      }
      .share-title {
        color: #ffffff;
        font-size: 16px;
        flex-wrap: wrap;
      }
    }

    // 倒计时
    .countdown-content {
      width: 300px;
      height: 36px;
      line-height: 36px;
      background: rgba(255, 124, 93, 1);
      border: 1px solid rgba(255, 255, 255, 0.49);
      border-radius: 18px;
      text-align: center;
      color: #ffffff;
      font-size: 16px;
      letter-spacing: 5px;

      .time {
        padding: 0 5px;
        height: 25px;
        line-height: 25px;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 5px;
        display: block;
        letter-spacing: 0;
        margin-right: 5px;
      }
    }
  }
  //商品信息
  .goods-content {
    padding: 0 10px;
    .goods-price {
      color: #f73b3c !important;
      font-size: 18px !important;
      font-weight: bold !important;
    }
    .eshowBtn {
      border-color: #f73b3c !important;
      background-color: #f73b3c;
      color: #ffffff !important;
      font-size: 12px !important;
    }
  }

  // 悬浮分享
  .float-share {
    background: rgba(0, 0, 0, 0.5);
    width: 45px;
    height: 45px;
    text-align: center;
    line-height: 45px;
    border-radius: 22.5px;
    color: #ffffff;
    font-size: 14px;
    position: fixed;
    right: 5px;
    top: 50vh;
    z-index: 100;
    &:active {
      background-color: rgba(0, 0, 0, 0.3);
    }
  }
}
</style>
